<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>新闻编辑</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <div th:replace="header :: header" ></div>
    <link rel="stylesheet" href="http://yandex.st/highlightjs/8.0/styles/solarized_dark.min.css"/>
    <script src="http://yandex.st/highlightjs/8.0/highlight.min.js"></script>
</head>
<body>
<div class="ui container">
    <div th:replace="menu :: menu"></div>
    <div class="ui grid">
        <div class="twelve wide column">

            <div class="ui raised segment">
                <form class="ui form edit">
                    <div class="ui error message"></div>
                    <div class="field hidden">
                        <input type="hidden" th:field="${news.id}"/>
                    </div>
                    <div class="field">
                        <input type="text" placeholder="标题" th:field="${news.title}"/>
                    </div>
                    <div class="field">

                    </div>
                    <div class="field">
                        <textarea id="text-input" oninput="this.editor.update()"
                                  rows="20" cols="60" th:field="${news.article}"></textarea>
                    </div>
                    <div class="ui field segment">
                        <div id="preview"></div>
                    </div>
                    <script src="/static/md/markdown.js"></script>
                    <script>
                        function Editor(input, preview) {
                            this.update = function () {
                                preview.innerHTML = markdown.toHTML(input.value);
                                $('div>p>code').each(function(i, block) {
                                    hljs.highlightBlock(block);
                                });
                            };
                            input.editor = this;
                            this.update();
                        }
                        var $$ = function (id) { return document.getElementById(id); };
                        new Editor($$("text-input"), $$("preview"));
                        hljs.configure({useBR: true});
                    </script>
                    <script src="//cdn.bootcss.com/highlight.js/9.6.0/highlight.min.js"></script>
                    <script>hljs.initHighlightingOnLoad();</script>
                    <div class="ui field">
                        <input class="ui button" type="submit" id="submit" th:value="${update} ? '编辑新闻' : '发布新闻'"/>
                    </div>
                    <input type="hidden" th:if="${_csrf}" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>
                </form>
                <script>
                    $(document).ready(function() {
                        $('.ui.form.edit').form({
                            fields: {
                                title: {
                                    identifier: 'title',
                                    rules: [
                                        {
                                            type: 'empty',
                                            prompt: '请输入标题！'
                                        }
                                    ]
                                },
                                article: {
                                    identifier: 'article',
                                    rules: [
                                        {
                                            type: 'empty',
                                            prompt: '请输入正文！'
                                        }
                                    ]
                                }
                            },
                            onSuccess: function () {
                                var formData = {
                                    title: getFieldValue('title'),
                                    article: $("#text-input").val(),
                                    id: getFieldValue('id')
                                };

                                var type = 'POST';
                                var url='/edit/';
                                console.log(window.location.pathname);
                                if(window.location.pathname!='/edit'){
                                    type = 'PUT';
                                }

                                $.ajax({
                                    headers:{'X-CSRF-TOKEN':$("input[name=_csrf]").val()},
                                    type: type,
                                    url: '/edit/',
                                    contentType: "application/json",
                                    data: JSON.stringify(formData),
                                    success: onFormSubmitted,
                                    error: errormsg
                                });
                            }
                        }).submit( function( e ) {
                            e.preventDefault();
                        });
                        function getFieldValue(fieldId) {
                            // 'get field' is part of Semantics form behavior API
                            return $('.ui.form.edit').form('get field', fieldId).val();
                        }
                        function errormsg(err) {
                            $('.ui.form.edit').form({
                                onFailure : function (err, fields) {
                                    console.log(err);
                                    console.log(fields);
                                }
                            });
                        }
                        // Handle post response
                        function onFormSubmitted(response) {
                            console.log(response)
                            if(response=='ok'){
                                var s = window.location.pathname;
                                window.location.href= s.replace("/edit","");
                            }
                        }
                    });

                </script>
            </div>

        </div>
        <div class="four wide column">

            <div th:replace="mycard :: mycard"></div>

        </div>
    </div>


    <div th:replace="footer :: footer"></div>
</div>
</body>
</html>